<template>
  <div class="app-container">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" :style="{'height': formHeight}" class="edit-form">
        <el-row>
          <el-col :span="22" v-if="hotelEnable">
            <el-form-item label="酒店名称" prop="hotelId">
              <el-select
                ref="hotelId"
                v-model="form.hotelId"
                filterable
                remote
                reserve-keyword
                default-first-option
                style="width: 100%"
                placeholder="请选择酒店"
                :remote-method="getHotelList"
                :loading="hotelLoading">
                <el-option
                  v-for="item in hotelOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="房间名称" prop="name">
              <el-input ref="name" v-model="form.name" placeholder="请输入房间名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="房间类型" prop="typeId">
              <el-select ref="typeId" v-model="form.typeId" placeholder="请选择房间类型">
                <el-option
                  v-for="item in roomTypeList"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="所在楼层" prop="floorNum">
              <el-input-number v-model="form.floorNum" placeholder="请输入所在楼层" controls-position="right" :min="0"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="价格（元）" prop="price">
              <el-input-number v-model="form.price" placeholder="请输入价格" controls-position="right" :min="0" :step="1" :precision="2"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="原价格（元）" prop="priceSrc">
              <el-input-number v-model="form.priceSrc" placeholder="请输入原价格" controls-position="right" :min="0" :step="1" :precision="2"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in dict.type.shop_goods_status"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="缩略图" prop="imgAbbrev">
              <image-upload ref="imgAbbrev" v-model="form.imgAbbrev" :biz-id="roomId" biz-code="SHOP_HOTEL_R_ABBREV" :limit="1" @input="imgAbbrevChange"/>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="轮播图" prop="imgDetail">
              <image-upload v-model="form.imgDetails" :biz-id="roomId" biz-code="SHOP_HOTEL_R_DETAIL" zoom="0"></image-upload>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="房间描述">
              <editor v-model="form.roomDesc" :min-height="192"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="房间最小面积" prop="roomMinArea">
              <el-input-number v-model="form.roomMinArea" placeholder="请输入房间最小面积" controls-position="right" :min="0"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="房间最大面积" prop="roomMaxArea">
              <el-input-number v-model="form.roomMaxArea" placeholder="请输入房间最大面积" controls-position="right" :min="0"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="有无窗户" prop="windows">
              <el-select v-model="form.windows" placeholder="请选择是否留有窗户">
                <el-option
                  v-for="dict in dict.type.public_yes_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="无线" prop="wirelessNet">
              <el-select v-model="form.wirelessNet" placeholder="请选择是否安装无线网络">
                <el-option
                  v-for="dict in dict.type.public_yes_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="有线宽带" prop="wiredNet">
              <el-select v-model="form.wiredNet" placeholder="请选择是否安装有线宽带">
                <el-option
                  v-for="dict in dict.type.public_yes_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="是否禁烟" prop="smoke">
              <el-select v-model="form.smoke" placeholder="请选择是否禁烟">
                <el-option
                  v-for="dict in dict.type.public_yes_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="允许入住人数" prop="personNum">
              <el-input-number v-model="form.personNum" placeholder="请输入房间允许入住人数" controls-position="right" :min="0"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="有无早餐" prop="breakfast">
              <el-select v-model="form.breakfast" placeholder="请选择有无早餐">
                <el-option
                  v-for="dict in dict.type.public_yes_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="床位描述" prop="bedDesc">
              <el-input v-model="form.bedDesc" type="textarea" placeholder="请输入床位描述" :maxlength="120"/>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="食品饮品" prop="foodDesc">
              <el-input v-model="form.foodDesc" type="textarea" placeholder="请输入食品饮品" :maxlength="200"/>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="费用政策" prop="costDesc">
              <el-input v-model="form.costDesc" type="textarea" placeholder="请输入费用政策" :maxlength="200"/>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="便利设施" prop="amenityDesc">
              <el-input v-model="form.amenityDesc" type="textarea" placeholder="请输入便利设施" :maxlength="200"/>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="媒体科技" prop="mediumDesc">
              <el-input v-model="form.mediumDesc" type="textarea" placeholder="请输入媒体科技" :maxlength="200"/>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="浴室配套" prop="bathroomDesc">
              <el-input v-model="form.bathroomDesc" type="textarea" placeholder="请输入浴室配套" :maxlength="200"/>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="洗浴用品" prop="toiletriesDesc">
              <el-input v-model="form.toiletriesDesc" type="textarea" placeholder="请输入洗浴用品" :maxlength="200"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
  </div>
</template>

<script>
import { getHotelRoom, addHotelRoom, updateHotelRoom } from "@/api/shop/hotel/room";
import { listHotel, getHotel } from "@/api/shop/hotel";
import { listRoomType } from "@/api/shop/roomType";

export default {
  name: "HotelRoom",
  dicts: ['public_yes_no', 'shop_hotel_room_type', 'shop_goods_status'],
  data() {
    return {
      // 表单的高度
      formHeight: document.documentElement.scrollHeight - 160 + "px",
      // 酒店id
      hotelId: null,
      // 房间id
      roomId: null,
      // 房间类型数据
      roomTypeList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        hotelId: [
          { required: true, trigger: "blur", message: "请选择商店" }
        ],
        name: [
          { required: true, trigger: "blur", message: "请输入房间名称" }
        ],
        imgAbbrev: [
          { required: true, trigger: "blur", message: "请上传缩略图" }
        ],
        imgDetails: [
          { required: true, trigger: "blur", message: "请上传轮播图" }
        ],
        price: [
          { required: true, trigger: "blur", message: "请输入价格" }
        ],
        typeId: [
          { required: true, trigger: "blur", message: "请选择房间类型" }
        ],
      },
      // 商店数据源
      hotelOptions: [],
      // 商店选择遮罩
      hotelLoading: false
    };
  },
  created() {
    this.reset();
    const roomId = this.$route.query && this.$route.query.roomId;
    const hotelId = this.$route.query && this.$route.query.hotelId;
    if (roomId) {
      this.roomId = Number(roomId);
      this.getInfo(roomId);
    } else {
      this.getHotelList();
    }
    if (hotelId) {
      this.hotelId = hotelId;
    }
    if (!roomId && hotelId) {
      this.getHotel(hotelId);
      this.getTypeList(this.hotelId);
    }
  },
  computed: {
    // 是否禁用
    hotelEnable() {
      return !this.hotelId;
    },
  },
  methods: {
    /** 查询酒店房间详情 */
    getInfo(id) {
      getHotelRoom(id).then(response => {
        this.form = response.data;
        this.form.price /= 100;
        this.form.priceSrc /= 100;
        this.getHotel(response.data.hotelId);
        this.getTypeList(this.form.hotelId);
      });
    },
    /** 查询酒店详情 */
    getHotel(id) {
      getHotel(id).then(response => {
        this.hotelOptions.push(response.data);
        this.form.hotelId = id;
        this.form.floorNum = response.data.floorNum;
      });
    },
    /** 查询文创商店列表 */
    getHotelList(query) {
      if (query !== '') {
        this.hotelLoading = true;
        const queryParams = {
          name: query
        }
        listHotel(queryParams).then(response => {
          this.hotelOptions = response.rows;
          this.hotelLoading = false;
        });
      }
    },
    // 查询房间类型
    getTypeList(hotelId) {
      listRoomType({hotelId: hotelId}).then(response => {
        this.roomTypeList = response.rows;
      })
    },
    // 取消按钮
    cancel() {
      const obj = { path: "/shop/hotel/room", query: {hotelId: this.hotelId} };
      this.$tab.closeOpenPage(obj);
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        hotelId: null,
        roomId: null,
        roomDesc: null,
        type: null,
        name: null,
        roomMinArea: null,
        roomMaxArea: null,
        bedDesc: null,
        floorNum: null,
        price: 0,
        priceSrc: 0,
        windows: null,
        wirelessNet: null,
        wiredNet: null,
        smoke: null,
        personNum: null,
        breakfast: null,
        foodDesc: null,
        costDesc: null,
        amenityDesc: null,
        mediumDesc: null,
        bathroomDesc: null,
        toiletriesDesc: null,
        status: '1',
        isDel: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid, object) => {
        if (valid) {
          if (this.form.id != null) {
            updateHotelRoom(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
            });
          } else {
            addHotelRoom(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.form.id = response.data.id;
              this.roomId = response.data.id;
              // this.form.price /= 100;
              // this.form.priceSrc /= 100;
            });
          }
        } else {
          let str = []
          for (let key in object) {
            object[key].map(item => {
              str.push(item.message)
            })
            let dom = this.$refs[Object.keys(object)[0]]
            if (Object.prototype.toString.call(dom) !== '[object Object]') {
              dom = dom[0]
              break
            }
            // 定位代码
            dom.$el.scrollIntoView({
              block: 'center',
              behavior: 'smooth'
            });
          }
          this.$modal.msgError(str.join(', '));
        }
      });
    },
    /** 保存url到业务表 */
    imgAbbrevChange(val) {
      if (val && val.length) {
        this.form.imgAbbrev = val[0].zoomUrl;
      }
    }
  }
};
</script>
<style lang="scss">
.edit-form {
  overflow-y: auto;
}
</style>
